.container {
  position: relative;
  will-change: height, opacity;

  overflow: hidden;
}

.transition {
  transition:
    height var(--duration) ease-in-out 0s,
    opacity var(--duration) ease-in-out 0s;
}

.summary {
  list-style: none;

  cursor: pointer;
}

.trigger {
  cursor: pointer;

  border: 0;
  outline: none;
  background: transparent;
}

.fade {
  position: absolute;
  z-index: 10;
  right: 0;
  bottom: 0;
  left: 0;

  height: calc(var(--ring-unit) * 3);

  pointer-events: none;

  color: var(--ring-content-background-color);
  background-image: linear-gradient(to bottom, transparent 0%, currentColor 50%);
}
